<template>
  <div class="box">
    <div class="login">
      <!-- 
        ruleForm:数据
        rules:规则
        ruleFormRef:id
      -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="120px">
        <el-form-item>
          <h1>强盛集团后台管理系统</h1>
        </el-form-item>
        <el-form-item prop="username" label="用户名">
          <el-input v-model="ruleForm.username" type="text"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="ruleForm.password" type="text"></el-input>
        </el-form-item>
        <el-form-item prop="verifyCode" label="验证码">
          <el-input style="width: 100px" v-model="ruleForm.verifyCode" type="text"></el-input>
          <div @click="toggle_zym">
            <img :src="yzmCode_svg" alt="">
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="submitForm(ruleFormRef)">登录</el-button>
          <el-button type="primary">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { loginApi, getCaptcha } from "@/api";
import { LoginForm } from "@/api/auth/types";

const ruleFormRef = ref<FormInstance>();
const $router = useRouter();

const ruleForm = reactive<LoginForm>({
  username: "admin",
  password: "123456",
  grant_type: 'captcha',
  verifyCode: "",
  verifyCodeKey: "",
});
const yzmCode_svg = ref("");

const rules = reactive<FormRules>({
  username: [{ required: true, message: "用户名必填", trigger: "blur" }],
  password: [{ required: true, message: "密码必填", trigger: "blur" }],
  verifyCode: [{ required: true, message: "验证码必填", trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      console.log("submit!");
      let data: { data: { data } } = await loginApi(ruleForm);
      let _code = data.data.code

      let token_type = data.data.data.token_type
      let access_token = data.data.data.access_token
      console.log(_code, data.data.data);

      if (_code === "00000") {
        //提示
        ElMessage({
          showClose: true,
          message: "登录成功!",
          type: "success",
          // duration: "00000",
        });
        localStorage.setItem("code", _code);
        localStorage.setItem("token", `${token_type} ${access_token}`);
        //跳转
        setTimeout(() => {
          $router.replace("layout");
        }, 1500);
      } else {
        ElMessage({
          showClose: true,
          message: "登录失败!",
          type: "error",
        });
      }
    } else {
      ElMessage({
        showClose: true,
        message: "用户名或者密码不合法!",
        type: "error",
      });
      return false;
    }
  });
};


const toggle_zym = async () => {
  let {
    data: { data },
  } = await getCaptcha();
  console.log(data);
  ruleForm.verifyCodeKey = data.verifyCodeKey
  console.log(data.captchaId);

  yzmCode_svg.value = data.verifyCodeImg;
};
//钩子函数
onMounted(async () => {
  toggle_zym();
});
</script>

<style scoped lang="less">
.box {
  height: 100%;
  width: 100%;
  background-image: url("@/assets/images/bg.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .login {
    height: 350px;
    width: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;

    /deep/ .el-form-item__label {
      color: white;
    }

    border-radius: 10px;
    border: 15px solid rgba(0, 0, 0, 0.1);
    background-color: #273d81;
    background-clip: padding-box;
    text-align: center;

    .el-form {
      margin-top: 50px;
      width: 500px;
      text-align: center;

      h1 {
        font-size: 35px;
        color: white;
      }
    }
  }
}
</style>
